<template>
  <div class="fullMain">
    <alarmTime :isShowAlarmTime.sync="isShowAlarmTime" 
    :remindInfo="remindInfo"
    @getPickedReplayTime = "getPickedReplayTime"></alarmTime>
    <div class="mainbBg">
      <!--插入验证提示框-->
      <div v-transfer-dom>
        <alert v-model="isShowAlert"> {{alertText}}</alert>
      </div>
      <div class="reportDiv" style="height:calc(100% - 60px);overflow:auto;">
        <div>
          <p style="margin: 20px 10px;height: auto;color: #999">当前日期：{{today}}</p>
          <span style="margin: 10px 12px;height: auto;">标题：</span>
          <label>
            <input v-model="todoTitle" @change="checkTitle" style="width: 14em;border: #ededed solid 1px"></input>
          </label>
          <div v-show="isShowTitleWarn">
            <br>
            <label style="color: red;margin-left: 10px">*标题不允许为空</label>
          </div>
        </div>
        <hr style="background: #ebebeb;height:1px;border: none">
        <div style="margin-top: 5px;margin-bottom: 10px;display: flex">
          <span style="margin: 10px 10px;height: 4em;">备注：</span>
          <textarea v-model="tips" style="height: 40px;width: 15em;border: #ededed solid 1px;padding: 5px"
            @focus="checkTitle"></textarea>
        </div>
        <group>
          <datetime class="times" @on-change="checkStartDate" :readonly="readonly" v-model="startDate" id="start"
            format="YYYY-MM-DD HH:mm" v-if="hackReset" title="开始时间" :show-next-month="false" :show-last-month="false"
            end-date="2020-12-31" style="height: 50px"></datetime>
          <datetime class="times" @on-change="checkEndDate" :readonly="readonly" v-model="endDate" id="end"
            format="YYYY-MM-DD HH:mm" v-if="hackReset" title="结束时间" :show-next-month="false" :show-last-month="false"
            end-date="2020-12-31" style="height: 50px"></datetime>
        </group>

        <group>
          <x-switch :title="getTitleTime()"  :value-map="[false, true]" 
          v-model="isRemind" :inline-desc="time.dayToWeekDay(remindInfo.remindDays)" 
          @click.native="modifyRemind"></x-switch>
        </group>
        <hr style="background: #ebebeb;height:1px;border: none;margin-top: 60px">
        <div style="height: 20px"></div>
      </div>

      <x-button type="primary" @click.native="submit">提交</x-button>
      <div style="margin-bottom: 60px;"></div>
    </div>

  </div>
</template>

<script>
import {
  XHeader,
  Group,
  Calendar,
  Datetime,
  XTextarea,
  XSwitch,
  XButton,
} from "vux";
import { mapState } from "Vuex";
import group from "api/schedule";
import common from "utilMethods/common.js";
import time from 'utilMethods/time.js'
import alarmTime from "components/AlarmTime/alarmTime";

export default {
  name: "createTodoPage",
  data() {
    return {
      hackReset: true,
      today: "",
      endDate: "",
      remindListNull: [],
      startDate: "",
      tips: "",
      todoTitle: "",
      isShowAlarmTime: false, //用于控制提醒时间
      isRemind: false, //是否开启提醒
      remindInfo: {
        remindTime: "",
        remindDays: [],
      },
      readonly: false,
      isShowAlert: false, // 是否显示验证提示框
      alertText: "",
      //输入验证相关
      isShowTitleWarn: false,
      modifyFlag: false, //修改标记
      modifyId: "", //修改的日程号
      modifyUserId: "", //日程创建者的id
      title: '<span style="color:red">我是红色</span>',
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  mounted() {
    // 解决datetime数据不绑定问题
    this.hackReset = false;
    this.init();
    this.$nextTick(() => {
      this.hackReset = true;
    });
  },
  watch: {},
  components: {
    XHeader,
    Group,
    Calendar,
    Datetime,
    XTextarea,
    XSwitch,
    XButton,
    alarmTime,
  },

  methods: {
    init() {
      const scheduleFlag = this.$store.state.isSchedule;
      let now = common.getCurrentTime();
      this.today = now.slice(0, 10);
      if (scheduleFlag) {
        let modifySchedule = this.$store.state.modifySchedule;
        this.modifyFlag = true;
        this.modifyId = modifySchedule.scheduleId;
        this.modifyUserId = modifySchedule.userId;
        this.todoTitle = modifySchedule.detail.title;
        this.tips = modifySchedule.detail.tips;
        this.startDate = modifySchedule.detail.startDate
          .slice(0, -3)
          .replace("T", " ");
        this.endDate = modifySchedule.detail.endDate
          .slice(0, -3)
          .replace("T", " ");
        this.remindInfo.remindTime = modifySchedule.detail.remindTime;
        this.isRemind = modifySchedule.detail.remind;
      } else {
        now = now.slice(0, -3);
        now = now.replace("T", " ");
        this.startDate = now;
        this.endDate = now;
      }
    },
    checkTitle() {
      this.isShowTitleWarn = this.todoTitle === "";
    },
    checkStartDate() {
      if (this.endDate !== undefined && this.endDate < this.startDate) {
        this.endDate = this.startDate;
      }
    },
    checkEndDate() {
      if (this.endDate !== undefined && this.endDate < this.startDate) {
        this.startDate = this.endDate;
      }
    },
    async submit() {
      this.startDate = this.startDate.replace(" ", "T");
      this.endDate = this.endDate.replace(" ", "T");
      if (this.endDate !== "" && this.startDate !== "") {
        if (this.modifyFlag) {
          const result = await group.putUpdateSchedule({
            detail: {
              endDate: this.endDate + ":00",
              remind: this.isRemind,
              remindTime: this.remindInfo.remindTime,
              noRemindDays: this.getNoRemindDays(),
              startDate: this.startDate + ":00",
              tips: this.tips,
              title: this.todoTitle,
            },
            scheduleId: this.modifyId,
            userId: this.modifyUserId,
          });
          if (result.code === 1) {
            this.showAlert(result.data);
            setTimeout(this.closeTip, 1500);
          }
        } else {
          const result = await group.postAddSchedule({
            detail: {
              endDate: this.endDate + ":00",
              remind: this.isRemind,
              remindTime: this.remindInfo.remindTime,
              noRemindDays: this.getNoRemindDays(),
              startDate: this.startDate + ":00",
              tips: this.tips,
              title: this.todoTitle,
            },
            scheduleId: "",
            userId: this.userInfo.userId,
          });
          if (result.code === 0) {
            this.showAlert("提交计划失败");
          } else if (result.code === 1) {
            this.showAlert(result.data);
            setTimeout(this.closeTip, 1500);
            this.jumpToS_mainview();
          }
        }
      }
      this.startDate = this.startDate.replace("T", " ");
      this.endDate = this.endDate.replace("T", " ");
    },
    getNoRemindDays() {
      let arr = [0, 0, 0, 0, 0, 0, 0, 0];
      let result = [];
      this.remindInfo.remindDays.forEach((element) => {
        arr[element] = 1;
      });
      for (let i = 1; i < arr.length; ++i) {
        if (arr[i] === 0) {
          result.push(i);
        }
      }
      return result;
    },
    clear() {
      this.setToday();
      this.todoTitle = "";
      this.tips = "";
      this.isRemind = false;
    },
    jumpToS_mainview() {
      this.clear();
      this.$router.push({ name: "S_mainview" });
    },
    getPickedReplayTime(val) {
      this.remindInfo = val[0];
      this.isShowAlarmTime = val[1];
      this.isRemind = val[2];
    },
    // FIXME:这个点击有问题，会冒泡
    modifyRemind() {
      this.isShowAlarmTime = true;
    },
    getTitleTime() {
      let result;
      if (this.remindInfo.remindTime) {
        if(this.isRemind){
          result =
          '<span style="font-size:26px;">' +
          this.remindInfo.remindTime +
          '</span>';
        }else{
          result =
          '<span style="font-size:26px;color:gray;text-decoration:line-through; ">' +
          this.remindInfo.remindTime +
          '</span>';
        }
        
      } else {
        result = "开启提醒";
      }
      return result;
    },
    // 用于判断返回：到上一页还是退出
    pushHistory() {
      var state = {
        title: "title",
        url: this.$route.path,
      };
      window.history.replaceState(state, "title", this.$route.path);
    },
    back() {
      this.clear();
      this.$router.go(-1);
    },
    // 设置今天的时间
    setToday() {
      let now = common.getCurrentTime(); //YYYY-MM-DDTHH:MM:SS
      this.today = now.slice(0, 10);
      this.placeholder = this.today;
      now = now.slice(0, -3);
      now = now.replace("T", " ");
      this.startDate = now;
      this.endDate = now;
    },
    showAlert(alertText) {
      this.isShowAlert = true;
      this.alertText = alertText;
    },
    // 关闭验证提示框
    closeTip() {
      this.isShowAlert = false;
      this.alertText = "";
    },
  },
};
</script>
<style lang="less" scoped>
.weui-cells_radio {
  height: 250px;
}

.weui-cells_radio .weui-cell__bd p {
  margin: 5px;
}
.timeDiv {
  span {
    color: gray;
    margin-right: 15px;
  }
  .remindTime {
    // font-size: 14px;
  }
}
</style>